import type { VxeGridPropTypes } from '@vben/plugins/vxe-table';

import { h } from 'vue';

import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table';

import { Button, Image } from 'ant-design-vue';

import { useVbenForm } from './form';
import { number } from 'echarts';

setupVbenVxeTable({
  configVxeTable: (vxeUI) => {
    vxeUI.setConfig({
      grid: {
        align: 'center',
        border: false,
        minHeight: 180,
        formConfig: {
          // 全局禁用vxe-table的表单配置，使用formOptions
          enabled: false,
        },
        proxyConfig: {
          autoLoad: true,
          response: {
            result: 'rows',
            total: 'total',
            list: 'rows',
          },
          showActiveMsg: true,
          showResponseMsg: false,
        },
        // 溢出展示形式
        showOverflow: true,
        pagerConfig: {
          // 默认条数
          pageSize: 20,
          // 分页可选条数
          pageSizes: [10, 20, 30, 40, 50],
        },
        rowConfig: {
          // 鼠标移入行显示 hover 样式
          isHover: true,
          // 点击行高亮
          isCurrent: false,
        },
        columnConfig: {
          // 可拖拽列宽
          resizable: true,
        },
        // 右上角工具栏
        toolbarConfig: {
          // 自定义列
          custom: {
            icon: 'vxe-icon-setting',
          },
          // 最大化
          zoom: true,
          // 刷新
          refresh: {
            // 默认为reload 修改为在当前页刷新
            code: 'query',
          },
        },
        // 圆角按钮
        round: true,
        // 表格尺寸
        size: 'medium',
        customConfig: {
          // 表格右上角自定义列配置 是否保存到localStorage
          // 必须存在id参数才能使用
          storage: false,
        },
      },
      tooltip: {
        zIndex: 3000,
      },
    });

    // 表格配置项可以用 cellRender: { name: 'CellImage' },
    vxeUI.renderer.add('CellImage', {
      renderTableDefault(_renderOpts, params) {
        const { column, row } = params;
        return h(Image, { src: row[column.field] });
      },
    });

    // 表格配置项可以用 cellRender: { name: 'CellLink' },
    vxeUI.renderer.add('CellLink', {
      renderTableDefault(renderOpts) {
        const { props } = renderOpts;
        return h(
          Button,
          { size: 'small', type: 'link' },
          { default: () => props?.text },
        );
      },
    });

    vxeUI.renderer.add('CellColor', {
      renderTableDefault(renderOpts, params) {
        const { props } = renderOpts;
        const { row, column } = params;
        return h(
          'span',
          {
            style: {
              color: props?.color,
            },
          },
          row[column.field],
        );
      },
    });
    //
    vxeUI.renderer.add('CellColorAmount', {
      renderTableDefault(renderOpts, params) {
        const { props } = renderOpts;
        const { row, column } = params;
        // 转换值为数字类型
        const numericValue = Number(row[column.field]);
        // 判断是否为有效数字
        const isNumber = !isNaN(numericValue);
        const value = isNumber
          ? `${(numericValue / 10).toFixed(2)} 元`
          : row[column.field];
        return h(
          'span',
          {
            style: {
              color: props?.color,
            },
          },
          value,
        );
      },
    });

    // 在 setup 或初始化模块中注册自定义渲染器
    vxeUI.renderer.add('GiftTagsRenderer', {
      renderTableDefault(renderOpts, params) {
        const { props } = renderOpts;
        const { row, column } = params;
        // 核心渲染逻辑
        return h(
          'div',
          {
            class: 'gift-tags-wrapper',
            style: {
              display: 'flex',
              flexWrap: 'wrap',
              gap: '4px',
            },
          },
          // 动态渲染赠品标签
          row[column.field]?.map((gift: any) => {
            return h(
              'span',
              {
                class: 'gift-tag',
                style: {
                  backgroundColor: props?.tagColor || '#e8f4ff',
                  borderRadius: '4px',
                  padding: '2px 6px',
                  cursor: 'pointer',
                  transition: 'all 0.3s',
                  '&:hover': {
                    boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
                  },
                },
                onClick: (e: Event) => {
                  e.stopPropagation();
                  props?.onTagClick?.(gift); // 触发点击回调
                },
              },
              [
                h('span', gift.giftProductName),
                h(
                  'span',
                  {
                    style: {
                      color: '#666',
                      marginLeft: '4px',
                    },
                  },
                  `x${gift.giftNum}`,
                ),
                h(
                  'span',
                  { style: 'color: #ff4d4f;' },
                  `  剩余:${
                    gift.giftNum - gift.giftUsedNum === 0
                      ? 0
                      : gift.giftNum - gift.giftRefundableNum - gift.giftUsedNum
                  }`,
                ),
              ],
            );
          }) ?? '-', // 空值兜底
        );
      },
    });

    // 这里可以自行扩展 vxe-table 的全局配置，比如自定义格式化
    // vxeUI.formats.add
  },
  useVbenForm,
});

export { useVbenVxeGrid };

export type * from '@vben/plugins/vxe-table';

/**
 * 判断vxe-table的复选框是否选中
 * @param tableApi api
 * @returns boolean
 */
export function vxeCheckboxChecked(
  tableApi: ReturnType<typeof useVbenVxeGrid>[1],
) {
  return tableApi?.grid?.getCheckboxRecords?.()?.length > 0;
}

/**
 * 通用的 排序参数添加到请求参数中
 * @param params 请求参数
 * @param sortList vxe-table的排序参数
 */
export function addSortParams(
  params: Record<string, any>,
  sortList: VxeGridPropTypes.ProxyAjaxQuerySortCheckedParams[],
) {
  // 这里是排序取消 length为0 就不添加参数了
  if (sortList.length === 0) {
    return;
  }
  // 支持单/多字段排序
  const orderByColumn = sortList.map((item) => item.field).join(',');
  const isAsc = sortList.map((item) => item.order).join(',');
  params.orderByColumn = orderByColumn;
  params.isAsc = isAsc;
}
